<template>
    <div class="imglist" v-show="images.length">
        <h3>图片列表：</h3>
        <div class="waterfall my-waterfall">
            <div class="imgbox" v-for="(image,index) in images" :key="index">
                <img :src="image" alt="" @click="showBigImg(index)" @load="imgOnLoad">
                <span>图片{{index + 1}}</span>
            </div>
        </div>
        <div class="wholePage" v-if="disabled">
            <div class="bigImg">
                <img :src="image" alt="">
                <div class="closeShowBig" @click="closeShowBig">X</div>
                <div class="toPrex" @click="toPrex">《</div>
                <div class="toNext" @click="toNext">》</div>
            </div>
            
        </div>
    </div>
</template>

<script>
import bus from '../../bus.js';
import { Waterfall } from '../../waterfall.js';
export default {
    name:"imgList",
    data(){
        return {
            images:[
                'src/assets/2.jpg','src/assets/1.jpg','src/assets/3.jpg',
                'src/assets/5.jpg','src/assets/4.jpg'
            ],
            currentIndex:0,
            disabled:false,
            image:''
        }
    },
    mounted(){
        // 从ImgUploader接收已上传的图片
        bus.on("toImgList",(data) => {
            this.images = data;
        })
    },
    methods:{
        // 瀑布流横向排列
        imgOnLoad(){
            new Waterfall({
                el:".my-waterfall",
                column:4,
                gap:20
            })
        },
        // 显示大图
        showBigImg(i){
            this.disabled = true;
            this.image = this.images[i];
            this.currentIndex = i;
        },
        // 关闭大图
        closeShowBig(){
            this.disabled = false;
        },
        // 上一张图片
        toPrex(){
            if(this.currentIndex === 0){
                this.currentIndex = this.images.length - 1;
            }else{
                this.currentIndex--;
            };
            this.showBigImg(this.currentIndex);
        },
        // 下一张图片
        toNext(){
            if(this.currentIndex === this.images.length - 1){
                this.currentIndex = 0;
            }else{
                this.currentIndex++;
            };
            this.showBigImg(this.currentIndex);
        }
    }
}
</script>

<style>
.imglist{
    margin:20px;
    position:relative;
}
h3{
    text-align: left;
}
.waterfall{
    border:1px solid red;
    position:relative;
}
.imgbox{
    position:absolute;
    counter-increment: item-counter;
}
.imgbox img{
    width:100%;
    height: auto;
    cursor:pointer;
}
.imgbox::after{
    position: absolute;
    display: block;
    top:2px;
    left:2px;
    width:20px;
    height:20px;
    text-align: center;
    line-height: 20px;
    background-color: rgb(0,0,0,0.8);
    color:#fff;
    content:counter(item-counter);
}
.bigImg{
    position:absolute;
    top:-190px;
    left:1px;
    height:580px;
    width:100%;
    background:rgb(209,224,220,1);
}
.bigImg img{
    height:95%;
    width:auto;  
}
.closeShowBig{
    position:absolute;
    top:0px;
    right:0px;
    height:30px;
    width:30px;
    color:rgb(33,150,243,0.5);
    background:rgb(209,224,220,0.5);
    font-size:30px;
    line-height: 30px;
    text-align:center;
    cursor:pointer;
}
.toPrex, .toNext{
    position:absolute;
    top:40%;
    height:50px;
    width:50px;
    color:rgb(33,150,243,0.8);
    background:rgb(209,224,220,0.5);
    font-size:36px;
    cursor:pointer;
}
.toPrex{
    left:0px;
    text-align:left;
}
.toNext{
    right:0px;
    text-align:right;
}
</style>